[DB] Search, Upload 페이지 UI 리팩토링 및 전역 헤더 스타일 통일#62
Merged
usn757 merged 3 commits intoPETTY-HUB:mainfrom Jun 7, 2025
Merged
Conversation
기존 search 페이지는 향후 확장을 고려해 탭 구조로 설계되었으나, 현재는 단일 검색 기능만 사용하고 있어 불필요한 UI 복잡성을 야기하고 있었습니다. 이번 커밋을 통해 더 이상 사용하지 않는 탭 인터페이스를 제거하고 관련 코드를 정리하여 코드베이스를 개선하고 유지보수성을 높였습니다. 주요 변경 사항: - search.html: 탭 구조를 위한 마크업(.nav-tabs, .tab-content 등) 제거 및 콘텐츠 직접 표시 - search.css: 탭 UI에 사용되던 스타일 규칙 삭제 - bootstrap-overrides.css: 탭 관련 오버라이드 스타일 규칙 삭제
기존 `visionUpload` 페이지가 `search` 등 다른 페이지와 레이아웃 너비, 헤더 색상, 컴포넌트 디자인 등에서 일관성이 부족했던 문제를 해결했습니다.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📜 PR 내용 요약
search및visionUpload페이지의 UI/UX 불일치 문제를 해결하고, 사이트 전반의 디자인 일관성을 확보하기 위한 리팩토링을 진행했습니다.search페이지의 불필요한 탭 UI를 제거하여 구조를 간소화했으며,visionUpload페이지의 레이아웃과 스타일을 전면 재구성하여search페이지와 시각적으로 통일되도록 수정했습니다. 또한,header.css를 수정하여 모든 페이지에서 일관된 헤더 디자인이 표시되도록 개선했습니다.before ->
after ->
⚒️ 작업 및 변경 내용 (상세하게)
1.
search페이지 UI 구조 간소화search페이지는 향후 확장을 고려한 탭(Tab) 구조였으나, 현재는 단일 검색 기능만 사용되어 불필요한 UI 복잡성을 가지고 있었습니다.<ul>,.tab-content등)을 모두 제거하고, 검색 필터와 결과 영역을 페이지의 기본 콘텐츠로 표시하도록 구조를 단순화했습니다.search.css,bootstrap-overrides.css)를 정리하여 코드베이스를 개선했습니다.search.html,search.css,bootstrap-overrides.css2.
visionUpload페이지 리팩토링 및 레이아웃 통일visionUpload페이지는 독립적인 레이아웃과 스타일 규칙을 가지고 있어,search페이지와 너비, 여백, 내부 컴포넌트 디자인이 모두 달라 이질적인 사용자 경험을 제공했습니다.common.css의<main>태그 제약을 피하기 위해 구조를 변경하고,search페이지와 동일한 반응형 너비(최대 1296px)를 갖도록 커스텀 컨테이너를 적용했습니다.<style>블록을 정리하고,bootstrap-overrides.css를 직접 링크하여search페이지와 동일한 디자인 테마(버튼, 폼 등)를 적용했습니다.alert창과form이 과도하게 늘어나는 것을 방지하기 위해, 내부 그리드(col-lg-8)를 추가하여 콘텐츠 너비를 적절히 제한했습니다.visionUpload.html3. 전역 헤더 스타일 불일치 문제 해결
PETTY)와 우측 상단 메뉴(프로필, 로그아웃 등)의 색상이 다르게 표시되는 문제가 있었습니다.header.css의 스타일 규칙을 구체화했습니다.header a규칙을 삭제하고,.logo-container h1 a와.account-btn-div a에 대한 개별 규칙을 정의하여 로고와 메뉴의 색상 및 호버 효과를 전역적으로 통일했습니다.header.css📚 기타 참고 사항
리뷰 포인트
search.html과visionUpload.html두 페이지의 전체적인 레이아웃(너비, 여백)과 내부 컴포넌트(버튼, 폼, 안내창) 스타일이 의도대로 통일되었는지 확인 부탁드립니다.